<template>
	<view class="container bg-white">
		<u-form :model="form" :rules="rules" labelWidth="100" ref="uForm" label-position="top">
			<u-form-item label="公司名称" prop="companyName" required>
				<u-input v-model="form.companyName" placeholder="请输入公司名称" maxlength="50" />
			</u-form-item>

			<u-form-item label="姓名" prop="name" required>
				<u-input v-model="form.name" placeholder="请输入姓名" maxlength="20" />
			</u-form-item>

			<u-form-item label="职务" prop="position">
				<u-input v-model="form.position" placeholder="请输入职务" maxlength="30" />
			</u-form-item>

			<u-form-item label="手机号码" prop="mobile" required>
				<u-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" type="number" />
			</u-form-item>

			<u-form-item label="电子邮箱" prop="email">
				<u-input v-model="form.email" placeholder="请输入电子邮箱" maxlength="50" />
			</u-form-item>

			<u-form-item label="微信号" prop="wechatNumber">
				<u-input v-model="form.wechatNumber" placeholder="请输入微信号" maxlength="30" />
			</u-form-item>

			<u-form-item label="公司地址" prop="companyAddress">
				<u-input v-model="form.companyAddress" placeholder="请输入公司地址" maxlength="100" type="textarea" />
			</u-form-item>
		</u-form>

		<view class="submit-btn flex justify-center">
			<u-button type="primary" shape="circle" @click="submitForm" :loading="submitLoading">确定</u-button>
		</view>
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				form: {
					companyName: '',
					name: '',
					position: '',
					mobile: '',
					email: '',
					wechatNumber: '',
					companyAddress: ''
				},
				rules: {
					companyName: [{
							required: true,
							message: '请输入公司名称',
							trigger: ['blur', 'change']
						},
						{
							max: 50,
							message: '公司名称长度不能超过50个字符',
							trigger: ['blur', 'change']
						}
					],
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						},
						{
							max: 20,
							message: '姓名长度不能超过20个字符',
							trigger: ['blur', 'change']
						}
					],
					position: [{
						max: 30,
						message: '职务长度不能超过30个字符',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							trigger: ['blur', 'change']
						}
					],
					email: [{
							validator: (rule, value, callback) => {
								if (!value) return true; // 非必填，为空时不校验
								return this.$u.test.email(value);
							},
							message: '邮箱格式不正确',
							trigger: ['blur', 'change']
						},
						{
							max: 50,
							message: '邮箱长度不能超过50个字符',
							trigger: ['blur', 'change']
						}
					],
					wechatNumber: [{
						max: 30,
						message: '微信号长度不能超过30个字符',
						trigger: ['blur', 'change']
					}],
					companyAddress: [{
						max: 200,
						message: '公司地址长度不能超过200个字符',
						trigger: ['blur', 'change']
					}]
				},
				submitLoading: false,
				fromCreateAiPerson: null
			};
		},
		onLoad(options) {
			this.fromCreateAiPerson = options && options.fromCreateAiPerson ? options.fromCreateAiPerson : null;
			console.log("this.fromCreateAiPerson", this.fromCreateAiPerson)
			this.findCardInfo();
		},
		methods: {
			findCardInfo() {
				this.depot.get(api.aiCard("cardInfo/findCardInfo"))
				.then(res => {
					console.log(res)
					if (res && res.data && res.data.data) {
						this.form = res.data.data;
					}
				})
			},
			async submitForm() {
				console.log("in submitForm", this.$refs.uForm)
				this.submitLoading = true;
				let valid = await this.$refs.uForm.validate()
				.catch(e => {
					console.log(e)
					this.submitLoading = false;
				})
				if (valid) {
					await this.depot.post(api.aiCard("cardInfo/saveCardInfo"), this.form)
					.catch( e => {
						this.submitLoading = false;
					})
					this.$refs.toast.show({
						type: "success",
						title: "提示",
						message: "名片信息保存成功！"
					});
					uni.$emit("saveCardInfoSuccess")
					await new Promise(resolve => {setTimeout(() => {resolve()}, 2000)});
					console.log("fromCreateAiPerson", this.fromCreateAiPerson)
					if (this.fromCreateAiPerson) {
						uni.navigateTo({
							url:"/pages/aiPerson/createAiPersonSuccess"
						})
					} else {
						uni.reLaunch({
							url:"/pages/index/menus"
						})
					}
					this.submitLoading = false;
				} else {
					this.submitLoading = false;
				}
			}
		},
		onReady() {
			// 如果需要，可以在这里设置表单验证规则
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="less">
	.container {
		padding: 20rpx 40rpx;
		height: 100vh;

		.u-form-item {
			margin-bottom: 30rpx;

			/deep/ .u-form-item__body {
				padding: 0;
			}
		}

		.submit-btn {
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			width: calc(100vw - 80rpx);

			.u-btn {
				height: 90rpx;
				border-radius: 45rpx;
				font-size: 32rpx;
			}
		}

		/deep/ .u-input {
			padding: 20rpx 24rpx;
			border-radius: 12rpx;
			background-color: #f7f7f7;

			&.u-input--textarea {
				min-height: 200rpx;
			}
		}

		/deep/ .u-form-item__message {
			padding-left: 24rpx;
		}
	}
</style>